<html>

<head>
    <link rel="stylesheet" href="../normalize.css">
    <link rel="stylesheet" href="../index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>

    <div id="app">
        <!--只渲染未完成的todo-->
        <li v-for="todo in todos" v-if="!todo.isComplete">
            {{ todo }}
        </li>
        <ul v-if="todos.length">
            <li v-for="todo in todos">
                {{ todo }}
            </li>
        </ul>
        <p v-else>No todos left!</p>
    </div>

    <script type="text/javascript">
        var app4 = new Vue({
            el: '#app',
            data: {
                todos: [
                    { text: '学习 JavaScript', isComplete: true },
                    { text: '学习 Vue' },
                    { text: '整个牛项目' }
                ]
            }
        })

    </script>
</body>

</html>